<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.element {
				width: 0px;
				height: 0px;
				border-top: 20px solid red;
				border-right: 20px solid #760000;
				border-bottom: 20px solid blue;
				border-left: 20px solid darkkhaki;
			}

			.element1 {
				width: 0px;
				height: 0px;
				border-top: 20px solid transparent;
				border-right: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 20px solid darkkhaki;
			}

			.angle-wrapper {
				width: 300px;
				height: 200px;
				position: relative;
				margin: 20px auto;
				border: 2px solid #cccccc;
			}

			.angle-wrapper:before {
				content: '';
				width: 0;
				height: 0;
				border: 20px solid transparent;
				border-left-color: #cccccc;
				position: absolute;
				left: 100%;
				top: 50%;
				margin-top: -20px;
			}

			.angle-wrapper:after {
				content: "";
				width: 0;
				height: 0;
				border: 18px solid transparent;
				border-left-color: #FFFFFF;
				position: absolute;
				left: 100%;
				top: 50%;
				margin-top: -18px;
			}

			.marker {
				width: 50px;
				height: 50px;
				border: 1px solid #088;
				border-radius: 100px;
				background-color: #FFFFFFF;
				opacity: 0.5;
		</style>
		</style>
	</head>
	<body>
		<div class="element">
		</div>
		<div class="element1">
		</div>
		<div class="angle-wrapper">
		</div>
		<div class="marker"></div>
	</body>
</html>
